<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>3.0 condition and circle</title>
    <script src="../static/vue.min.js"></script>
    <script src="../static/jquery.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app">
    <!--条件判断-->
    <!--if语句-->
    <p v-if="seen">看到我了</p>
    <template v-if="ok">
        <h1>凌风学长</h1>
        <p>学的不仅是技术更是梦想</p>
        <p>打字辛苦</p>
    </template>
    <hr>
    <!--v-else指令-->
    <div v-if="Math.random()>0.5">Sorry</div>
    <div v-else>Not sorry</div>
    <hr>
    <!--v-else-if指令-->
    <div v-if="type==='A'">A</div>
    <div v-else-if="type==='B'">B</div>
    <div v-else-if="type==='C'">C</div>
    <div v-else>Not A/B/C</div>
    <button v-on:click="select('A')">A</button>
    <button v-on:click="select('B')">B</button>
    <button v-on:click="select('C')">C</button>
    <button v-on:click="select('D')">D</button>
    <hr>
    <!--v-show指令-->
    <h1 v-show="ok">Hello!</h1>
</div>
<hr>
<div id="circle">
    <!--使用for指令-->
    <ol>
        <li v-for="site in sites">
            {{site.name}}
        </li>
    </ol>
    <hr>
    <ol>
        <li v-for="sitename in sitenames">
            {{sitename}}
        </li>
    </ol>
    <!--在模版中使用for指令-->
    <ol>
        <template v-for="site in sites">
            <li><span style="background: red">{{site.name}}</span>+====+{{site.age}}</li>
            <li>--------------------------</li>
        </template>
    </ol>
    <!--for迭代对象属性-->
    <ul>
        <li v-for="value in object">
            {{value}}
        </li>
    </ul>
    <!--提供第二个参数为键名-->
    <ul>
        <li v-for="(value,key) in object">{{key}}:{{value}}</li>
    </ul>
    <!--提供第三个参数为索引-->
    <ul>
        <li v-for="(value,key,index) in object">{{index}}.{{key}}:{{value}}</li>
    </ul>
    <!--for迭代整数-->
    <ul><li v-for="n in 10">{{n}}</li></ul>
</div>
<script>
    var circle = new Vue({
        el: "#circle",
        data: {
            sites: [
                {name: 'LFSenior',age:'12'},
                {name: 'Google',age:'12'},
                {name: 'Taobao',age:'12'}
            ],
            sitenames: ["name1", "name2", "name3"],
            object:{
                name:'LFSenior',
                url:'http://www.lfsenior.cn',
                slogan:'学的不仅仅是技术'
            }
        },
        methods: {}
    });
    var vm = new Vue({
        el: "#app",
        data: {
            seen: true,
            ok: true,
            type: 'A'
        },
        methods: {
            select: function (value) {
                this.type = value;
            }
        }
    });
</script>
</body>
</html>